<!-- 顶部导航菜单 -->
<template>
  <div style="position: absolute;z-index: 2">
    <el-menu
        :default-active="pageIndex"
        :active-text-color="$store.state.theme"
        text-color="#304156"
        class="el-menu-demo nav-menu"
        style="box-shadow: 0  1px 10px rgba(0, 0, 150, .2);"
        mode="horizontal"
        @select="handleSelect"
    >

      <i class="el-icon-eleme" size="large"></i>
      <el-menu-item>
        <el-link href="/#/">首页</el-link>
      </el-menu-item>
      <el-menu-item>
        <el-link href="/#/tech?type=总体">技术点</el-link>
      </el-menu-item>
      <el-menu-item>
        <el-link href="/#/knowledge">知识库展示</el-link>
      </el-menu-item>
      <!--el-menu-item index="4">{{$t('pages.page4')}}</el-menu-item-->
      <!-- 页面(中/英文显示) -->
      <!--el-menu-item index="1">{{$t('pages.page1')}}</el-menu-item-->
      <!--el-menu-item index="2">{{$t('pages.page2')}}</el-menu-item-->
      <!--el-menu-item index="3">{{$t('pages.page3')}}</el-menu-item-->
      <!--el-menu-item index="4">{{$t('pages.page4')}}</el-menu-item-->

      <!--      &lt;!&ndash; 语言选框 &ndash;&gt;-->
      <!--      <div class="el-item-box" v-if="false">-->
      <!--        <lang-picker></lang-picker>-->
      <!--      </div>-->

      <!--      &lt;!&ndash; 主题颜色选框 &ndash;&gt;-->
      <!--      <div class="el-item-box" v-if="false">-->
      <!--        <theme-picker></theme-picker>-->
      <!--      </div>-->
      <el-dropdown @command="handleCommand" menu-align='start' class="avator">
        <!--        <img :src="baseImgPath + adminInfo.avatar" class="avator">-->
        <div v-if="isLogin">
          <i class="el-icon-user-solid">已登录</i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
            <el-dropdown-item command="paperstar">论文收藏</el-dropdown-item>
            <el-dropdown-item command="signout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </div>
        <div v-else>
          <i class="el-icon-user-solid">未登录</i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="login">立即登录</el-dropdown-item>
          </el-dropdown-menu>
        </div>
      </el-dropdown>
    </el-menu>
  </div>
</template>

<script>
// import LangPicker from "@/components/lang-picker/index.vue"; //语言选择插件
// import ThemePicker from "@/components/theme-picker/index.vue"; //主题选择插件

export default {
  // components: {
  //   LangPicker,
  //   ThemePicker
  // },
  props: {
    pageIndex: {
      type: String,
      default: "1"
    }
  },
  data() {
    return {
      isLogin: false
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (localStorage.getItem('userLoginStatus') == 'true') {
        this.isLogin = true
      } else {
        this.isLogin = false
      }
      // localStorage.setItem('userLoginStatus', false)
      // console.log('检查登录：', this.isLogin)
      // this.isLogin = false
    },
    //当前点击的选项
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$emit("selectChange", key); //向外触发选项改变事件, key是选项序号
    },
    handleCommand(command) {
      if (command === 'login') {
        this.$router.push('/login');
      } else if (command === 'signout') {
        localStorage.setItem('userLoginStatus', 'false')
        localStorage.setItem('userInfo', '')
        this.$router.push('/login')
      } else if (command === 'userinfo') {
        if (this.$route.path === '/user') {
          this.$message.warning('当前已在用户页面，如需切换子菜单请从左侧导航栏选择')
          return
        }
        this.$router.push('/user?pages=1')
      } else if (command === 'paperstar') {
        if (this.$route.path === '/user') {
          this.$message.warning('当前已在用户页面，如需切换子菜单请从左侧导航栏选择')
          return
        }
        this.$router.push('/user?pages=2')
      }
    },
  }
};
</script>

<style lang='scss' scoped>
$nav-height: 40px;
$nav-bgColor: rgba($color: #ffffff, $alpha: 1.0);
.nav-menu {
  background-color: #ffffff;
  position: fixed;
  top: 0;
  width: 100%;
  height: $nav-height;
  background: $nav-bgColor;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .el-menu-item {
    padding: 0 2%;
    height: $nav-height;
    line-height: $nav-height;
  }

  .el-icon-eleme {
    padding: 0 2%;
    height: $nav-height;
    line-height: $nav-height;
    align-self: flex-end;
  }

  .el-item-box {
    margin: 1%;
    color: #304156;
  }

  .avator {
    margin-left: auto;
    margin-right: 20px;
  }
}

.el-menu--horizontal {
  border-bottom: 0 !important;
}

.el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):hover, .el-submenu__title:hover {
  background-color: $nav-bgColor;
}
</style>
